<template>
  <div class="calendar-root">
    <div class="calendar-title">一周课程表</div>
    <div v-if="loading" class="calendar-loading">加载数据中......</div>
    <table v-else class="schedule-table">
      <thead>
        <tr>
          <th class="section-col section-header">节次/时间</th>
          <th v-for="day in weekDays" :key="day.value" class="day-col">{{ day.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="section in sections" :key="section.label">
          <td class="section-col">
            <div class="section-label">{{ section.label }}</div>
            <div class="section-time">{{ section.time }}</div>
          </td>
          <td
            v-for="day in weekDays"
            :key="day.value"
            class="course-cell"
          >
            <div
              v-if="getCourse(section, day.value)"
              class="course-box"
              :style="{ background: getCourseColor(section, day.value) }"
            >
              <div class="course-name">{{ getCourse(section, day.value).courseName }}</div>
              <div class="course-teacher">教师名：{{ getCourse(section, day.value).teacherName }}</div>
              <div class="course-classroom">教室：{{ getCourse(section, day.value).classroom }}</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const loading = ref(true)
const courses = ref([])
const teachers = ref([])

// 一周的星期
const weekDays = [
  { label: '周一', value: 1 },
  { label: '周二', value: 2 },
  { label: '周三', value: 3 },
  { label: '周四', value: 4 },
  { label: '周五', value: 5 },
  { label: '周六', value: 6 },
  { label: '周日', value: 7 }
]

// 只保留你的数据实际用到的节次
const sections = [
  { label: '第1节', time: '10:00-12:00', start: '10:00', end: '12:00' },
  { label: '第2节', time: '13:30-15:30', start: '13:30', end: '15:30' },
  { label: '第3节', time: '15:45-17:45', start: '15:45', end: '17:45' },
  { label: '第4节', time: '17:00-18:30', start: '17:00', end: '18:30' },
  { label: '第5节', time: '18:45-20:15', start: '18:45', end: '20:15' },
  { label: '第6节', time: '18:45-20:45', start: '18:45', end: '20:45' },
]

// 课程表二维映射
const courseMap = ref({})
const colorMap = ref({})

// 课程颜色池（浅色，和导航栏风格匹配）
const colorPool = [
  '#b3e5fc', // 浅蓝
  '#ffe0b2', // 浅橙
  '#c8e6c9', // 浅绿
  '#ffd6e0', // 浅粉
  '#fff9c4', // 浅黄
  '#d1c4e9', // 浅紫
  '#b2dfdb', // 浅青
  '#f8bbd0', // 浅玫红
  '#f0f4c3', // 浅柠檬
  '#ace0f9'  // 导航栏主色
]

onMounted(async () => {
  loading.value = true
  const [courseRes, teacherRes] = await Promise.all([
    axios.get('http://localhost:8080/api/courses'),
    axios.get('http://localhost:8080/api/teachers')
  ])
  courses.value = Array.isArray(courseRes.data) ? courseRes.data : courseRes.data.data
  teachers.value = Array.isArray(teacherRes.data) ? teacherRes.data : teacherRes.data.data

  // 构建 teacherId => name 映射
  const teacherMap = {}
  teachers.value.forEach(t => {
    teacherMap[t.teacherId] = t.name
  })

  // 课程名 => 颜色
  const usedColors = {}
  let colorIdx = 0

  // 构建课程表二维映射
  const map = {}
  courses.value.forEach(course => {
    if (!course.classTime) return
    let classTime
    try {
      classTime = typeof course.classTime === 'string' ? JSON.parse(course.classTime) : course.classTime
    } catch (e) {
      return
    }
    if (!classTime || !classTime.weekday || !classTime.start_time || !classTime.end_time) return
    // 找到节次
    const section = sections.find(
      s => s.start === classTime.start_time && s.end === classTime.end_time
    )
    if (!section) return
    const weekday = classTime.weekday
    if (!map[section.label]) map[section.label] = {}
    map[section.label][weekday] = {
      courseName: course.courseName,
      teacherName: teacherMap[course.teacherId] || '未知',
      classroom: course.classroom
    }
    // 颜色分配
    if (!usedColors[course.courseName]) {
      usedColors[course.courseName] = colorPool[colorIdx % colorPool.length]
      colorIdx++
    }
  })
  courseMap.value = map
  colorMap.value = usedColors
  loading.value = false
})

// 获取指定节次和星期的课程
function getCourse(section, weekday) {
  return courseMap.value[section.label]?.[weekday]
}
// 获取课程颜色
function getCourseColor(section, weekday) {
  const course = getCourse(section, weekday)
  return course ? colorMap.value[course.courseName] : colorPool[0]
}
</script>

<style scoped>
.calendar-root {
  margin-top: 0;
  padding-top: 0;
  background: #fff;
  min-height: 100vh;
  margin-right: 10px;
}
.calendar-title {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 16px 0;
  letter-spacing: 2px;
  line-height: 1.2;
}
.calendar-loading {
  margin-top: 10px;
  text-align: center;
  color: #1976d2;
  font-size: 15px;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  table-layout: fixed;
  box-shadow: 0 4px 24px #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}
.schedule-table th,
.schedule-table td {
  border: 1px solid #e4e7ed;
  text-align: center;
  vertical-align: middle;
  padding: 8px 2px;
  min-width: 80px;
  max-width: 180px;
  word-break: break-all;
  color: #333;
}
.schedule-table th.section-header {
  border-top-left-radius: 12px;
}
.schedule-table th.day-col:last-child {
  border-top-right-radius: 12px;
}
.schedule-table tr:last-child td.section-col {
  border-bottom-left-radius: 12px;
}
.schedule-table tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.section-header {
  /* background: #e3f2fd !important; */
  color: #1976d2;
  font-weight: bold;
  font-size: 16px;
  border-top-left-radius: 12px;
  text-align: center;
}
.section-col {
  background: #f5fafd;
  font-weight: bold;
  width: 110px;
  text-align: center;
  color: #1976d2;
}
.day-col {
  background: #f8fafb;
  font-weight: bold;
  text-align: center;
  color: #1976d2;
}
.course-cell {
  height: 70px;
  vertical-align: middle;
  padding: 0;
  text-align: center;
}
.course-box {
  color: #1976d2;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: #e3f7fe;
  box-shadow: none;
  border: none; /* 去除外边框 */
  text-align: center;
}
.course-name {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #1976d2;
}
.course-teacher,
.course-classroom {
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
  color: #1976d2; /* 统一主色 */
}
</style>